import React from "react";
import { Flex,Toast } from "antd-mobile";
import { API } from "../../utils/api";
import { BASE_URL } from "../../utils/url";
import SearchHeader from "../../components/SearchHeader";

// import './index.css'
import styles from "./index.module.css";

import Filter from "./components/Filter";

import HouseItem from "../../components/HouseItem";

// 引入 长列表组件
import {
  List,
  WindowScroller,
  AutoSizer,
  InfiniteLoader,
} from "react-virtualized";

// 吸顶组件
import Sticky from "../../components/Sticky"
import NoHouse from "../../components/NoHouse"

// const { label,value } = JSON.parse(localStorage.getItem("hkzf_city"));
import {getCurrentCity} from '../../utils'

export default class HouseList extends React.Component {
  state = {
    list: [], // 存储获取到的房屋列表数据
    count: 0, // 存储获取到的房屋总数
    // 数据是否加载中
    isLoading: true
  };

  // 初始化默认值
  label = ''
  value = ''

  // 初始化filters实例属性  和 state 一样
  filters = {};

  // 进入页面后就要拿到数据
 async componentDidMount() {
  /* 
    切换城市显示房源：
    原因：在组件外部的代码只会在项目加载时执行一次（刷新页面）。在切换路由时，不会重新重新执行。
       组件内部的 componentDidMount() 会在组件展示时执行，进入页面一次，执行一次。
  */
  //  解决切换城市 不会自动 显示定位城市房源的问题
   const { label, value } = await getCurrentCity()
  //  const { label,value } = JSON.parse(localStorage.getItem("hkzf_city"))
  //  挂载到 this 便于组件访问
   this.label = label
   this.value = value
   this.searchHouseList();
   
  }
  componentWillUnmount() {
    this.setState = () => {
      return
    }
  }

  // 创建方法onFilter，通过参数接收Filter子组件中的filters数据，并存储到this中
  onFilter = (filters) => {
    // console.log(filters);
    this.filters = filters;
    this.searchHouseList();
    // 解决 点击确定按钮后 页面不会回到顶部的问题
    window.scrollTo(0,0)
  };
  // 获取房源列表的函数
  async searchHouseList() {
    // // 获取当前定位城市的 ID
    // let { value } = JSON.parse(localStorage.getItem("hkzf_city"));
    // 开启loading
    Toast.loading('加载中...', 0, null, false)
    // 请求数据
    // console.log(this.filters);
    let res = await API.get("/houses", {
      params: {
        cityId: this.value,
        ...this.filters,
        start: 1,
        end: 20,
      },
    });
    console.log(res);
    
    const { list, count } = res.data.body;

     // 获取到数据后 关闭loading
     Toast.hide()

     // 提示房源数量
     // 解决了没有房源数据时，也弹窗提示的bug
     if (count !== 0) {
       Toast.info(`共找到 ${count} 套房源`, 2, null, false)
     }
    this.setState({
      list,
      count,
      // 数据加载完成的状态
      isLoading: false
    });
  }

  // 根据筛选条件渲染房屋列表
  renderHouseList = ({
    key, // Unique key within array of rows
    index, // Index of row within collection 索引号
    style, // Style object to be applied to row (to position it) 重点属性：一定要给每一个行数添加该样式
  }) => {
    // 获取每一行的数据
    const { list } = this.state; 
    // Cannot read properties of undefined (reading 'houseImg') 整个报错信息就代表 这里的 house 是undefined
    const house = list[index];
    // console.log(house);

// 为了解决 houseImg 读取失败的 问题
    // - 在renderHouseList方法中，判断house是否存在
    // - 不存在的时候，就渲染一个loading元素
    // - 存在的时候，再渲染HouseItem组件
    if (!house) {
      return (
        <div key={key} style={style}>
          <p className={styles.loading}></p>
        </div>
      )
    }
    // console.log(house);
    return (
      <HouseItem
        key={key}
        style={style}
        src={BASE_URL + house.houseImg}
        title={house.title}
        desc={house.desc}
        tags={house.tags}
        price={house.price}
        onClick={ () => this.props.history.push(`/housedetail/${house.houseCode}`) }
      ></HouseItem>
    );
  };

  // 使用 InfiniteLoader 组件，来实现无限滚动列表，从而加载更多房屋数据
   // 判断每一行数据是否加载完毕
   isRowLoaded = ({ index }) => {
    return !!this.state.list[index];
  }
  // 用来获取更多房屋列表数据
   loadMoreRows = ({ startIndex, stopIndex }) => {
    // console.log(startIndex,stopIndex);
    return new Promise(resolve => {
      API.get('/houses', {
        params: {
          cityId: this.value,
          ...this.filters,
          start: startIndex,
          end: stopIndex
        }
      }).then(res => {
        // console.log('loadMoreRows：', res)
        this.setState({
          list: [...this.state.list, ...res.data.body.list]
        })

        // 数据加载完成时，调用 resolve 即可
        resolve()
      })
    })
  }
// 封装租房列表---长列表
  renderList = () => {
     const { count, isLoading } = this.state
    // 关键点：在数据加载完成后，再进行 count 的判断
    // 解决方式：如果数据加载中，则不展示 NoHouse 组件；而，但数据加载完成后，再展示 NoHouse 组件
    if (count === 0 && !isLoading) {
      return <NoHouse>没有找到房源，请您换个搜索条件吧~</NoHouse>
    }
    return (
      <InfiniteLoader
            isRowLoaded={this.isRowLoaded} // 每一行数据是否加载完成
            loadMoreRows={this.loadMoreRows} // 加载更多数据的方法 在方法中调用接口
            rowCount={this.state.count} // 列表数据总条数
          >
            {({ onRowsRendered, registerChild }) => (
              <WindowScroller>
                {/* height 视口高度 isScrolling 表示是否滚动中 用来覆盖 List 组件自身的滚动状态 scrollTop 页面滚动的距离，用来同步 List 组件的滚动距离 */}
                {({ height, isScrolling, scrollTop }) => (
                  <AutoSizer>
                    {({ width }) => (
                      <List
                        onRowsRendered={onRowsRendered}
                        ref={registerChild} 
                        autoHeight // 设置高度为 WindowScroller 最终渲染的列表高度
                        height={height} // 组件的高度 会影响展示的列表行数
                        width={width} // 组件的宽度
                        rowCount={this.state.count} // List列表项总条目数
                        rowHeight={120} // 每一行高
                        rowRenderer={this.renderHouseList}
                        scrollTop={scrollTop}
                        isScrolling={isScrolling}
                      />
                    )}
                  </AutoSizer>
                )}
              </WindowScroller>
            )}
          </InfiniteLoader>
    )
  }

  render() {
    return (
      <div>
        {/* 顶部搜索导航栏 */}
        <Flex className={styles.header}>
          <i
            className="iconfont icon-back"
            onClick={() => this.props.history.go(-1)}
          ></i>
          <SearchHeader
            currentCityName={this.label}
            className={styles.searchHeader}
          ></SearchHeader>
        </Flex>

        {/* 筛选栏 */}
        <Sticky height={40}>
          <Filter onFilter={this.onFilter}></Filter>
        </Sticky>

        {/* 租房列表---长列表 */}
        <div className={styles.houseItems}>
          {this.renderList()}
        </div>
      </div>
    );
  }
}
